<template>
  <el-form :model="form">
    <el-form-item label="账号权限：" label-width="100px">
      <el-select v-model="form.roles" placeholder="请选择账号权限" multiple @change="handleSelectChange">
        <el-option v-for="role in roles" :key="role.id" :label="role.description" :value="role.id" />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import type { UserApiType } from '@/apis/user/namespace';

const emit = defineEmits<{
  (e: 'update:modelValue', value: UserApiType.ChangeRolesInterface): void;
}>();

const props = defineProps({
  roles: {
    type: Array as PropType<UserApiType.Roles[]>,
    required: true,
  },
  modelValue: {
    type: Object as PropType<UserApiType.ChangeRolesInterface>,
    required: true,
  },
});

const form = ref<UserApiType.ChangeRolesInterface>({
  userId: null,
  roles: [],
});

const handleSelectChange = (value: number[]) => {
  form.value.roles = value;
  emit('update:modelValue', form.value);
};

watch(
  () => props.modelValue,
  (value) => {
    form.value = value;
  },
  {
    immediate: true,
  },
);
</script>

<style scoped lang="scss"></style>
